/****************************************************************************
*created by yang.zheng on 2020-08-18 for main-layout file
****************************************************************************/

<template>
    <div class="main-container">
        <nav>
            <header>综合信息管理系统</header>
            <div class="userinfo">
                <img src="@/images/info-icon.png" alt="">
                <img src="@/images/user-man.png" alt="">
                <span>{{ username }}</span>
                <i @click="exitEvt"><img src="@/images/exit-icon.png" alt=""></i>
            </div>
        </nav>
        <aside>
            <el-menu :default-active="defaultIndex"
                class="el-menu-vertical-demo"
                background-color="#04a790"
                @select="MenuPick"
                text-color="#fff"
                active-text-color="#34f511">
                <el-submenu :index="it.id" v-for="it in menu" :key="it.id">
                    <template slot="title">
                        <i :class="it.icon" style="color : #fff"></i>
                        <span>{{ it.name }}</span>
                    </template>
                    <el-menu-item-group v-for="key in it.children" :key="key.index">
                    <el-menu-item :index="key.id">{{ key.name }}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
            
        </aside>
        <p>当前位置：{{ path }}</p>
        <article>
            <router-view></router-view>
        </article>
    </div>
</template>

<script>
import ajax from '@/util/Ajax';

    export default {
        data () {
            return {
                defaultIndex: '',
                path : '',
                username: '',
                menu: [ ]
            }
        },
        methods : {
            async getmenulist () {
                let res = await ajax({url : '/basedata/menu'})

                if (res.code === 200) {
                    this.menu = res.data || []
                    this.findpath()
                }else {
                    this.$message.warning('获取数据失败，请重试')
                }
            },
            exitEvt () {
                this.$store.dispatch('common/setUserInfo',{})
                this.$router.push('/login')
            },
            MenuPick (menuId) {
               this.menu.map(it => {
                   it.children.map(key => {
                       if (key.id === menuId) {
                           this.$router.push(key.path)
                       }
                   })
               })
            },
            findpath () {
                 this.menu.map(it => {
                    it.children.map(key => {
                        if(key.path === this.$route.path) {
                            this.path = `${it.name} > ${key.name}`
                            this.defaultIndex = key.id
                        }
                    })
                })
            }
        },
        watch : {
            '$route.path' : function (n , o) {
               this.findpath()

            }
        },
        created () {
            this.getmenulist()
            this.username = this.$store.getters['common/getUserInfo'].userName
        }
    }
</script>

<style lang="less" scoped>
    @import "@/styles/common";
    @import "@/styles/mainlayout";
</style>